<template>
  <!-- 随堂练习批阅 -->
  <div id="marking-practice">
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content">
          <div v-if="resData">
            <span class="preview-title">{{ resData.courseName }}</span>
            <span class="preview-line">/</span>
            <span>{{ resData.chapterName }}</span>
            <span>姓名：{{ resData.userName }}</span>
            <span>学号：{{ resData.userNumber }}</span>
          </div>
        </div>
      </div>
      <div class="preview-top2 jx-content">
        <div class="preview-top-content clearfix">
          <div class="fl">
            <span class="fs18">总分数：{{ resData.score }}分</span> &nbsp;
          </div>
          <div class="fr">
            <div @click="submitMarking" class="button-style">提交</div>
            <el-button :disabled="!resData.preview" @click="getPaper(resData.preview)" class="button-style">上一份</el-button>
            <el-button :disabled="!resData.next" @click="getPaper(resData.next)" class="button-style">下一份</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="jx-content preview-content" v-if="resData">
      <div v-for="(item,index) in resData.readingList" :key="index">
        <!-- 题型标题：一、选择题（每题1分，共2题） -->
        <h2 class="tq-title">{{ questionNumber[index] }}、{{ item.typeName }}(共{{ item.questionList.length }}题)</h2>
        <dl v-for="(item2,index2) in item.questionList" :key="index2">
          <dt class="markdown-body">
            <!-- 题型中序号 1.xxxx -->
            {{ index2+1 }}.
            <!-- 题目内容 -->
            <span v-html="item2.content"></span>
            <!-- 选择题 单选多选 -->
            <span v-if="item.type == 1">
              <span v-if="!item2.isMultipleChoice">[单选题]</span>
              <span v-if="item2.isMultipleChoice">[多选题]</span>
            </span>
            <!-- 括号 选择题答案映射选项A,B,C -->
            <span class="chose-item" :class="{'c-red':!item2.right}" v-if="item.type === 1">
              (
              <!-- 单选题 -->
              <span v-if="!item2.isMultipleChoice">
                <!-- 选择题没答 -->
                <span class="c-red" v-if="!item2.userAnswer && item2.userAnswer !== 0">未填写</span>
                <span v-else>{{ qKey[item2.userAnswer] }} </span>
              </span>
              <!-- 多选题 -->
              <span v-if="item2.isMultipleChoice">
                <!-- 选择题没答 -->
                <span class="c-red" v-if="isChoseNull(item2,index2)">未填写</span>
                <span v-else>{{ item2.userAnswer.map(item => qKey[item]).join("") }} </span>
              </span>
              )
            </span>
            <!-- 括号 判断题答案映射 正确 错误 -->
            <span class="chose-item" :class="{'c-red':!item2.right}" v-else-if="item.type === 2">
              (
              <!-- 判断题没答 -->
              <span class="c-red" v-if="!item2.userAnswer && item2.userAnswer !== false">未填写</span>
              <span v-else>{{ judgekey[item2.userAnswer-0] }}</span>
              )
            </span>
            <!-- 填空要把题型内括号过滤 没过滤==================================================================================================== -->
            <!-- 括号 填空题 显示括号 -->
            <!-- 括号 简答 编程 实验 不显示括号 -->
            <div class="stu-answer" v-else>
              学生答案：
              <span class="c-red" v-if="!item2.userAnswer">未填写</span>
              <span v-else>{{ item2.userAnswer }}</span>
            </div>

            <!-- 每题分数 -->
            <!-- ({{ item.score }}分) -->
            <!-- 正确答案 -->
            <!--选择题显示正确答案不换行-->
            <br v-if="item.type === 2" />
            <span class="c-blue">
              正确答案：
              <!-- 选择题映射选项A,B,C -->
              <span v-if="item.type === 1">{{ item2.rightAnswer.map(item => qKey[item]).join("") }}</span>
              <!-- 判断题映射 正确 错误 -->
              <span v-else-if="item.type === 2">{{ judgekey[item2.rightAnswer-0] }}</span>
              <span v-else v-html="item2.rightAnswer"></span>
            </span>
            <!-- 得分input框 -->
            <!-- <div v-if="item.type > 2" class="c-blue question-score">
              得分：
              <el-input @keyup.native="provingCount(item2,'score',item)" v-bind="questionScore" v-model.number="item2.score"></el-input>
            </div> -->
          </dt>
          <!-- 选择题选项 -->
          <dd v-if="item.type == 1" v-for="(item3,index3) in item2.choiceList" :key="index3">
            <span v-html="qKey[index3] + '. ' + item3"></span>
          </dd>
        </dl>
        <div v-if="item.type < 3">
          正确{{ item.right }}题，错误{{ item.wrong }}题
        </div>
        <div class="question-score">
          得分：
          <el-input v-bind="questionScore" v-model.number="item.totalScore" @keyup.native="provingCount(item,'totalScore')"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
//导出word
import "../../../../static/wordExport/jquery.wordexport";
export default {
  data() {
    return {
      //班级id
      classId: this.$route.query.id,
      //章节id
      chapterId: this.$route.query.chapterId,
      //类似学生id
      checkingId: this.$localstorage.getLocalStorage("checkingId"),
      paramsData: {},
      //接收的题目列表
      resData: "",
      //发送的数据
      //reqData:'',
      //选择题
      questionList1: null,
      //判断题
      questionList2: null,
      //填空题
      questionList3: null,
      //简答题
      questionList4: null,
      //编程题
      questionList5: null,
      qKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      judgekey: ["错误", "正确"],
      questionNumber: ["一", "二", "三", "四", "五", "六"],
      questionName: [
        {
          type: 1,
          name: "选择题"
        },
        {
          type: 2,
          name: "判断题"
        },
        {
          type: 3,
          name: "填空题"
        },
        {
          type: 4,
          name: "简答题"
        },
        {
          type: 5,
          name: "编程题"
        },
        {
          type: 6,
          name: "实验题"
        }
      ]
    };
  },
  computed: {
    //计算除选择判断外其他题得分和总分
    questionScore() {
      let that = this;
      if (that.resData) {
        //计算总分
        let readingList = that.resData.readingList;
        that.resData.score = readingList
          .map(item => item.totalScore - 0)
          .reduce((total, num) => total + num);
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getPaper(this.$localstorage.getLocalStorage("checkingId"));
    },
    //选择题多选是否填写
    isChoseNull(item2, index2) {
      //是数组
      if (item2.userAnswer instanceof Array) {
        return !item2.userAnswer.length;
      } else {
        //不是数组
        return item2.userAnswer && item2.userAnswer !== "empty";
      }
    },
    //限制input框只能输入正整数 并且不能超出指定分数
    provingCount(item, prop, row) {
      let that = this;
      //限制输入数字
      console.log(item[prop], 55);
      let reg = /^[0-9]+$/;
      let isInt = reg.test(item[prop]);
      console.log(isInt, 66);
      if (!isInt) {
        item[prop] = "";
        that.$message.warning("只能输入整数");
      }
      if (item[prop] > 999) {
        item[prop] = "";
        that.$message.warning("分数不能超过三位数");
      }
      
    },
    //获取试题
    getPaper(checkingId) {
      var that = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check/type/1/class/" +
            that.classId +
            "/chapter/" +
            that.chapterId +
            "/student/" +
            checkingId
        )
        .then(function(res) {
          console.log("成功");
          console.log(res, 110);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //滚动条置顶
              $("html,body").scrollTop(0);
              //替换填空题括号
              //填空题替换(+)为（）
              let fillQuestion = res.data.data.readingList.find(
                item => item.type === 3
              );
              if (fillQuestion) {
                let content = fillQuestion.questionList;
                $.each(content, function(i, d) {
                  let str = d.content;
                  var result = str.replace(/\(\+\)/g, "（）"); //把(+)替换成()
                  d.content = result;
                });
              }
              that.resData = res.data.data;
              window.localStorage.setItem('checkingId',checkingId);
              // if(res.data.data){
              //   let reqData = {};
              //   let typeScoreList = [];
              //   res.data.data.readingList.forEach(item => {
              //     let obj = {
              //       type:item.type,
              //       score:0,
              //     };
              //     typeScoreList.push(obj);
              //   });
              //   reqData.score = 0;
              //   reqData.typeScoreList = typeScoreList;
              //   that.reqData = reqData;
              // }
              console.log(that.resData, 666);
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //提交批阅
    submitMarking() {
      var that = this;
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check/type/1/class/" +
            that.classId +
            "/chapter/" +
            that.chapterId +
            "/student/" +
            that.$localstorage.getLocalStorage("checkingId"),
          that.resData
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "提交成功",
                type: "success"
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //上一份
    prevMarking() {},
    //下一份
    nextMarking() {}
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
body {
  background: #f8f8f8;
}
#marking-practice {
    //190717
  .stu-answer{
    color:$btn-blue;
  }
  .markdown-body {
    font-size: 14px !important;
  }
  //190717
  background: #f8f8f8;
   img{
     max-width:100%;
   }
  .underline {
    text-decoration: underline;
  }
  .font16 {
    font-size: 16px;
    line-height: 40px;
  }
  //选择题答案下划线
  .chose-item {
    text-decoration: underline;
    padding: 0 4px;
  }
  .question-score {
    .el-input {
      width: auto;
      .el-input__inner {
        width: 50px;
      }
    }
  }
  .preview-top {
    position: relative;
    z-index: 1;
    height: 120px;
    margin: 0px auto 0;
    .preview-top1 {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #101937;
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        span {
          margin-right: 40px;
        }
        .preview-title {
          font-size: 18px;
          margin-right: 0;
        }
        .preview-line {
          margin: 0 6px;
        }
      }
    }
    .preview-top2 {
      margin-top:0;
      width: 100%;
      line-height: 80px;
      position: fixed;
      top: 60px;
      padding: 0;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
        .button-style {
          margin-left: 20px;
        }
      }
      .preview-top-content2 {
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        padding-bottom: 30px;
      }
    }
  }
  .preview-content {
    width: 1200px;
    margin: 40px auto 20px;
    color: $title-gray;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    p {
      display: inline;
    }
    .tq-title {
      color: $title-gray;
      font-size: 16px;
      line-height: 40px;
    }
    dl {
      padding-left: 20px;
    }
    dt,
    dd {
      font-size: 14px;      
      //190717
      line-height: 24px;
      //190717
    }
        //190717
    dt {
      margin-bottom: 20px;
    }
    //190717
    dd {
      padding-left: 20px;
    }
    .btn-group {
      text-align: center;
      .button-style {
        margin: 40px 5px;
      }
    }
  }
}
</style>
